<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>待办事项</title>
  <style>
    :root {
      --primary-color: #4a6bdf;
      --primary-dark: #3a5bcf;
      --primary-light: #eef2ff;
      --text-color: #333;
      --text-light: #777;
      --bg-color: #f5f5f5;
      --card-bg: #ffffff;
      --border-color: #e0e0e0;
      --success-color: #28a745;
      --warning-color: #ffc107;
      --danger-color: #dc3545;
      --border-radius: 8px;
      --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      background-color: var(--bg-color);
      color: var(--text-color);
      height: 100vh;
      padding: 20px;
    }
    
    .container {
      max-width: 600px;
      margin: 0 auto;
    }
    
    .todo-app {
      background-color: var(--card-bg);
      border-radius: var(--border-radius);
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    
    .app-header {
      background-color: var(--primary-color);
      color: white;
      padding: 20px;
      text-align: center;
    }
    
    .app-title {
      margin: 0;
      font-size: 24px;
    }
    
    .todo-form {
      padding: 20px;
      display: flex;
      border-bottom: 1px solid var(--border-color);
    }
    
    .todo-input {
      flex: 1;
      padding: 10px 15px;
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius) 0 0 var(--border-radius);
      font-size: 16px;
    }
    
    .todo-input:focus {
      outline: none;
      border-color: var(--primary-color);
    }
    
    .todo-submit {
      background-color: var(--primary-color);
      color: white;
      border: none;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      border-radius: 0 var(--border-radius) var(--border-radius) 0;
    }
    
    .todo-submit:hover {
      background-color: var(--primary-dark);
    }
    
    .filter-container {
      display: flex;
      padding: 10px 20px;
      background-color: var(--primary-light);
      justify-content: center;
      gap: 10px;
    }
    
    .filter-button {
      background: none;
      border: none;
      padding: 5px 10px;
      cursor: pointer;
      font-size: 14px;
      border-radius: 15px;
    }
    
    .filter-button.active {
      background-color: var(--primary-color);
      color: white;
    }
    
    .todo-list {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    
    .todo-item {
      padding: 15px 20px;
      border-bottom: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      animation: fade-in 0.3s ease;
    }
    
    @keyframes fade-in {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .todo-checkbox {
      margin-right: 15px;
      appearance: none;
      -webkit-appearance: none;
      height: 20px;
      width: 20px;
      border: 2px solid var(--primary-color);
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    
    .todo-checkbox:checked {
      background-color: var(--primary-color);
    }
    
    .todo-checkbox:checked::after {
      content: '\2714';
      color: white;
      font-size: 12px;
    }
    
    .todo-text {
      flex: 1;
      font-size: 16px;
    }
    
    .completed .todo-text {
      text-decoration: line-through;
      color: var(--text-light);
    }
    
    .delete-button {
      background: none;
      border: none;
      color: var(--danger-color);
      cursor: pointer;
      font-size: 18px;
      margin-left: 10px;
      opacity: 0.6;
    }
    
    .delete-button:hover {
      opacity: 1;
    }
    
    .empty-state {
      text-align: center;
      padding: 40px 20px;
      color: var(--text-light);
    }
    
    .empty-state p {
      margin-top: 10px;
    }
    
    .stats {
      display: flex;
      justify-content: space-between;
      padding: 15px 20px;
      background-color: var(--primary-light);
      color: var(--text-color);
      font-size: 14px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="todo-app">
      <div class="app-header">
        <h1 class="app-title">待办事项</h1>
      </div>
      
      <form class="todo-form" id="todoForm">
        <input type="text" class="todo-input" id="todoInput" placeholder="添加新的待办事项..." autocomplete="off">
        <button type="submit" class="todo-submit">添加</button>
      </form>
      
      <div class="filter-container">
        <button class="filter-button active" data-filter="all">全部</button>
        <button class="filter-button" data-filter="active">未完成</button>
        <button class="filter-button" data-filter="completed">已完成</button>
      </div>
      
      <ul class="todo-list" id="todoList">
        <!-- 待办事项将通过JavaScript动态添加 -->
      </ul>
      
      <div class="empty-state" id="emptyState" style="display: none;">
        <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="10"></circle>
          <path d="M12 8v4"></path>
          <path d="M12 16h.01"></path>
        </svg>
        <p>暂无待办事项</p>
      </div>
      
      <div class="stats" id="todoStats">
        <span id="todoCount">0 项待办</span>
        <span id="completedCount">0 项已完成</span>
      </div>
    </div>
  </div>

  <script>
    // 获取SDK
    const AppSDK = window.AppSDK || {};
    
    // 元素引用
    const todoForm = document.getElementById('todoForm');
    const todoInput = document.getElementById('todoInput');
    const todoList = document.getElementById('todoList');
    const emptyState = document.getElementById('emptyState');
    const todoCount = document.getElementById('todoCount');
    const completedCount = document.getElementById('completedCount');
    const filterButtons = document.querySelectorAll('.filter-button');
    
    // 应用状态
    let todos = [];
    let currentFilter = 'all';
    
    // 初始化
    function init() {
      // 从存储加载数据
      loadTodos();
      
      // 事件监听器
      todoForm.addEventListener('submit', handleNewTodo);
      
      // 过滤器事件
      filterButtons.forEach(button => {
        button.addEventListener('click', () => {
          currentFilter = button.getAttribute('data-filter');
          
          // 更新活动按钮
          filterButtons.forEach(btn => btn.classList.remove('active'));
          button.classList.add('active');
          
          renderTodos();
        });
      });
    }
    
    // 处理新的待办事项
    function handleNewTodo(e) {
      e.preventDefault();
      
      const text = todoInput.value.trim();
      if (text === '') return;
      
      // 创建新待办事项
      const newTodo = {
        id: Date.now(),
        text,
        completed: false,
        createdAt: new Date().toISOString()
      };
      
      // 添加到列表
      todos.unshift(newTodo);
      
      // 清空输入框
      todoInput.value = '';
      
      // 重新渲染和保存
      renderTodos();
      saveTodos();
    }
    
    // 渲染待办事项列表
    function renderTodos() {
      // 过滤待办事项
      let filteredTodos = todos;
      
      if (currentFilter === 'active') {
        filteredTodos = todos.filter(todo => !todo.completed);
      } else if (currentFilter === 'completed') {
        filteredTodos = todos.filter(todo => todo.completed);
      }
      
      // 清空列表
      todoList.innerHTML = '';
      
      // 判断是否为空
      if (filteredTodos.length === 0) {
        emptyState.style.display = 'block';
      } else {
        emptyState.style.display = 'none';
        
        // 创建待办事项元素
        filteredTodos.forEach(todo => {
          const li = document.createElement('li');
          li.className = `todo-item ${todo.completed ? 'completed' : ''}`;
          
          li.innerHTML = `
            <input type="checkbox" class="todo-checkbox" ${todo.completed ? 'checked' : ''}>
            <span class="todo-text">${escapeHtml(todo.text)}</span>
            <button class="delete-button">&times;</button>
          `;
          
          // 复选框事件
          const checkbox = li.querySelector('.todo-checkbox');
          checkbox.addEventListener('change', () => {
            toggleTodo(todo.id);
          });
          
          // 删除按钮事件
          const deleteButton = li.querySelector('.delete-button');
          deleteButton.addEventListener('click', () => {
            deleteTodo(todo.id);
          });
          
          todoList.appendChild(li);
        });
      }
      
      // 更新统计
      updateStats();
    }
    
    // 切换待办事项状态
    function toggleTodo(id) {
      todos = todos.map(todo => {
        if (todo.id === id) {
          return { ...todo, completed: !todo.completed };
        }
        return todo;
      });
      
      renderTodos();
      saveTodos();
    }
    
    // 删除待办事项
    function deleteTodo(id) {
      todos = todos.filter(todo => todo.id !== id);
      
      renderTodos();
      saveTodos();
    }
    
    // 更新统计
    function updateStats() {
      const total = todos.length;
      const completed = todos.filter(todo => todo.completed).length;
      
      todoCount.textContent = `${total} 项待办`;
      completedCount.textContent = `${completed} 项已完成`;
    }
    
    // 保存到存储
    function saveTodos() {
      if (AppSDK.setData) {
        AppSDK.setData('todos', todos);
      } else {
        localStorage.setItem('todos', JSON.stringify(todos));
      }
    }
    
    // 从存储加载
    async function loadTodos() {
      try {
        let data = null;
        
        if (AppSDK.getData) {
          data = await AppSDK.getData('todos');
        } else {
          const stored = localStorage.getItem('todos');
          if (stored) {
            data = JSON.parse(stored);
          }
        }
        
        if (Array.isArray(data)) {
          todos = data;
          renderTodos();
        }
      } catch (error) {
        console.error('加载待办事项失败:', error);
      }
    }
    
    // HTML转义，防止XSS
    function escapeHtml(text) {
      const div = document.createElement('div');
      div.textContent = text;
      return div.innerHTML;
    }
    
    // 初始化应用
    init();
  </script>
</body>
</html> 